<template>
  <view class="favorite-page">
    <view class="header">
      <text class="title">我的收藏</text>
    </view>

    <view class="favorite-list">
      <!-- 遍历收藏数据 -->
      <view
        class="favorite-item"
        v-for="(item, index) in favoriteList"
        :key="index"
        @click="goToVideoDetail(item)"
      >
        <text class="video-title">{{ item.videoName || '无标题视频' }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      favoriteList: [], // 收藏数据
    };
  },
  onLoad(options) {
    // 假设 userInfo 是全局存储的，可以从缓存中获取
    const userInfo = uni.getStorageSync('userInfo') || {};
    if (userInfo.favorite) {
      this.favoriteList = userInfo.favorite; // 初始化收藏列表
    }
  },
  methods: {
    // 跳转到视频详情页面
    goToVideoDetail(video) {
        // 使用 Vuex 提交 mutation 更新 videoAbout
        this.$store.commit('setVideoAbout', video);
    
        // 跳转到视频详情页面
        uni.navigateTo({
            url: `/pages/video_display/index`,
        });
    },

  },
};
</script>

<style>
.favorite-page {
  padding: 20rpx;
}

.header {
  margin-bottom: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
}

.favorite-list {
  display: flex;
  flex-direction: column;
}

.favorite-item {
  padding: 20rpx;
  margin-bottom: 10rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
  cursor: pointer;
}

.video-title {
  font-size: 28rpx;
}
</style>
